<template>
	<div class="header">
		<div class="box">
			<h1>
				<div class="avatar-box">
					<img class="avatar" src="/public/logo.png" height="70" weight="70" />
				</div>
				<span class="z">Vue3传统京剧文化网站</span>
			</h1>
		</div>
		<div class="box">
			<nav class="nav_link">
				<router-link class="link_btn" active-class="active" to="/home/shouye">首页</router-link>
			</nav>
			<nav class="nav_link">
				<router-link class="link_btn" active-class="active" to="/home/jieshao">京剧之窗</router-link>
			</nav>
			<nav class="nav_link">
				<router-link class="link_btn" active-class="active" to="/home/zhongxin">京剧动态</router-link>
			</nav>
			<nav class="nav_link">
				<router-link class="link_btn" active-class="active" to="/home/yishu">关于我们</router-link>
			</nav>
			<nav class="nav_link">
				<router-link class="link_btn" active-class="active" to="/home/guanyu">个人中心</router-link>
			</nav>
			<nav class="nav_link">
				<router-link class="link_btn" active-class="active" to="/home/xian">概况</router-link>
			</nav>
		</div>
		<!-- 右侧按钮区域 -->
		<div class="layout-header-right">
			<el-button type="warning" class="btn btn-light" @click="onLogout">退出</el-button>
		</div>
	</div>
</template>

<script setup>
import { useRouter } from 'vue-router'
const router = useRouter()
const onLogout = () => {
	localStorage.removeItem('token')
	router.push('/login')
}
</script>

<style lang="less" scoped>
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 80px;
	background-color: #660000;
	color: antiquewhite;
	border: 1px solid #2c2c2c;
}

.box {
	display: flex;
	margin-left:20px;
	// align-items: center;
}

h1 {
	display: flex;
	align-items: center;
	font: normal 30px Cookie;
	padding: 0px 20px;
	color: #2c2c2c;
	font-family: "Microsoft YaHei";
}

.nav_link {
	display: flex;
	align-items: center;
	padding: 0 30px;
}

.link_btn {
	text-decoration: none;
	color: #FFFFFF;
	font-size: 25px;
	font-weight: normal;
}

.router-link {
	background-color: #efefef;
	box-sizing: border-box;
	position: relative;
}

.z {
	color: black;
	font-weight: bold;
}

.layout-header-right {
	margin-right: 30px;
}
</style>